/*
  学习目标：函数式组件-性能优化的三个常用方式
   1. React.memo
    作用：等价于类组件中的PureComponent，会减少无效更新
    语法：const 新的组件名 = React.memo(你的组件) 
   2. useMemo
    作用：给计算属性提供缓存效果
    本质：hooks函数，遵守hooks限制
    语法： const 计算属性 = useMemo( () => 返回计算的值， [参与计算的状态1， 参与计算的状态2]) 
   3. useCallback
    作用：避免事件函数每次被重新声明，理解：给函数的定义增加缓存效果
    语法：const 事件函数 = useCallback(你的回调函数， [])
    注意：
      💥 不能在回调中直接访问状态state，会出现永远都是初始值的
      💥 使用形参传递新值
*/

import { Button } from 'antd-mobile';
import { useCallback, useEffect, useState } from 'react';

export default function Test() {
  const [count, setCount] = useState(0);

  const handleAdd = useCallback((newCount: number) => {
    setCount(newCount);
  }, []);

  return (
    <div>
      <Count count={count} onAdd={handleAdd} />
    </div>
  );
}

function Count({ count, onAdd }: any) {
  useEffect(() => {
    console.log('我改了  ----->  ');
  }, [onAdd]);

  return (
    <div>
      <Button onClick={() => onAdd(count + 1)}>点我修改Count</Button>
      <h1>{count}</h1>
    </div>
  );
}
